<template>
	<div class="predict-price-add">
		<van-cell-group>
			<van-field @click="dataset.show = true" label="选择分类" :placeholder="forma.placeholder" is-link disabled />
			<!-- <div class="account">
				<div class="title">计算方式</div>
				<van-radio-group v-model="forma.radio">
					<van-radio v-for="(item, index) in forma.unit" :key="index" :name="index" checked-color="#07c160">{{ item.danweiming }}</van-radio>
				</van-radio-group>
			</div> -->
			<div class="weight van-hairline--top">
				<van-field label="" v-model="forma.number" placeholder="请输入重量" />
				<!-- <div class="number">{{ forma.unit }}</div> -->
			</div>
		</van-cell-group>
		<van-button type="primary" @click="eventClickAddShopCartItem">立即添加</van-button>
		<van-popup v-model="dataset.show" position="bottom" :style="{ height: '80%' }">
            <van-list v-model="dataset.loading" :finished="dataset.finished" finished-text="没有更多了" @load="controllerRequestChildOfferList" class="right-list">
                <dl class="offer-list-wrap" v-for="(item, index) in dataset.items" :key="index" @click="eventClickSelectType(item.name, index)">
                    <dt class="title">
                        <p>{{ item.name }}</p>
                    </dt>
                    <dd class="unit">
                        <p v-for="(itema, indexa) in item.danwei" :key="indexa"><span>{{ itema.price }}</span><span>/{{ itema.danweiming }}</span></p>
                    </dd>
                </dl>
            </van-list>
		</van-popup>
	</div>
</template>

<script>
	import {
		Cell, CellGroup,
        Field, Button, RadioGroup, Radio, Popup, List,
        Sidebar, SidebarItem
	} from 'vant';

	export default {
		name: 'ShopOrderItemAddNormal',
		components: {
			[Field.name]: Field, [Button.name]: Button,
			[CellGroup.name]: CellGroup, [Cell.name]: Cell,
			[RadioGroup.name]: RadioGroup, [Radio.name]: Radio,
            [Popup.name]: Popup, [List.name]: List,
            [Sidebar.name]: Sidebar, [SidebarItem.name]: SidebarItem
		},
		data() {
			return {
                activeKey: 0, classify: [],
				pga: 0, pgaList: [],
				forma: {
					index: -1,
					radio: 0, number: '',
					unit: [],
					placeholder: '点击选择废品/垃圾分类'
				},
				dataset: {
					show: false,
					loading: true, finished: false,
					page: 0, limit: 30, total: 0,
					items: [], itemsData: []
				}
			}
        },
		methods: {
            controllerRequestChildOfferList() {
				var url = '/api/home/garbage/getlist',
					params = {
						page: this.dataset.page,
						list_rows: this.dataset.limit,
                        pga: 0,
                        token: this.$store.state.options.user.token
                    };
                    
				this.$util.postRequestInterface(url, params, (res) => {
					var result = [],
						exportDataset = function (da) {
							for (let x of da) {
								result.push({
									id: x.id,
									idList: x.pgalist,
									title: x.name,
                                    pga: x.pga,
                                    oda: x
								});
							}
                        };
                    this.dataset.page++;
                        
                    exportDataset(res.data.data);
                    // if(this.pga > 0) {
                    // } else {
                    // }
					this.dataset.itemsData = result;
					this.dataset.items = res.data.data;
					if (this.dataset.items.length >= res.data.count) this.dataset.finished = true;
					this.dataset.loading = false;
				});
            },
			eventClickSelectType(name, index) {
				this.dataset.show = false;
				this.forma.placeholder = name;
                this.forma.index = index;
                this.forma.unit = this.dataset.items[index].danwei;
			},
			eventGoBackOperate() {
				this.pga = this.pgaList.pop() || 0;
			},
			eventClickAddShopCartItem() {
				if (!this.forma.number || this.forma.index == -1) {
					this.$toast('请选择分类单位并填写');
					return;
				};
				var index = this.forma.index,
                    item = this.dataset.itemsData[index];

				// item.weight = (this.forma.radio == 1) ? this.forma.number : '';
                // item.number = (this.forma.radio == 2) ? this.forma.number : '';
                item.unitIndex = this.forma.radio;
                item.unit = item.oda.danwei[item.unitIndex].danweiming
                item.number = this.forma.number;

				if (this.$store.state.shop.operateMode == 'stock') {
					var url = '/api/home/user/addStock',
						params = {
							u_id: '',
							garbageid: item.idList,
                            token: this.$store.state.options.user.token,
							danweiming: item.unit,
							number: item.number
						};
					this.$util.postRequestInterface(url, params, (res) => {
						this.$router.go(-1);
					});
				} else {
					console.log(item);
					this.$store.commit('shop/addShopCartsItem', item);
					this.$router.go(-1);
				}
			},
		},
		watch: {
			// pga(nVal, oVal) {
			// 	// console.log(nVal, oVal);
			// 	if (this.pgaList.indexOf(nVal) < 0 && nVal > 0) this.pgaList.push(nVal);
			// 	// console.log(this.pgaList);
			// 	this.dataset.page = 0;
			// 	this.dataset.items = [];
			// 	this.dataset.finished = false;
			// 	this.dataset.loading = false;
			// 	this.controllerRequestChildOfferList();
			// },
			'forma.index'(nVal, oVal) {
				this.forma.placeholder = this.dataset.itemsData[nVal].title;
				this.dataset.show = false;
			},
			'dataset.show'(nVal, oVal) {
				if (this.dataset.page == 0) {
					this.controllerRequestChildOfferList();
				}
			},
			// 'forma.radio'(nVal, oVal) {
			// 	if (nVal == '1') {
			// 		this.forma.unit = 'kg';
			// 	} else {
			// 		this.forma.unit = '个';
			// 	}
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.predict-price-add {
		.weight {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.number {
				margin-right: 1.5rem;
				color: #333333;
			}
		}

		.account {
			padding: 1.6rem 1.6rem;
			display: flex;
			/*border-bottom: 0.01rem solid #ebedf0;*/
			/*margin: 0 1rem;*/
		}

		.van-cell {
			padding: 1rem 1.6rem !important;
			display: flex;
		}

		.account .van-radio-group {
			display: flex;
			flex: 1;
			justify-content: center;

			.van-radio:last-child {
				margin-left: 4rem;
			}
		}

		.van-button {
			width: 100%;
			position: fixed;
			bottom: 0;
			background: #00cc00;
			font-size: 1.4rem;
		}

		.goback-button {
			background-color: #00cc00;
			padding: 1rem;
			color: #ffffff;
		}

		.offer-list-wrap {
			padding: 1rem;
			border-bottom: 0.4rem solid #f4f4f4;
            display: flex;

            p {
                margin: 0rem;
                padding: 0rem;
            }

			.title {
                padding-right: 1rem;
			}

			.unit {
                flex: 1;

                p {
                    text-align: right;
                }
			}

			.button {
				text-align: right;
				font-size: 1.3rem;
				padding: 1.3rem 0rem;

				img {
					width: 1.7rem;
					vertical-align: middle;
					margin-right: 0.5rem;
				}

				span {
					position: relative;
					top: 1.5px;
				}
			}
		}
	}

    .two-col-list {
        display: flex;

        .right-list {
            flex: 0px;
        }
    }
</style>
